<template>
  <el-dialog title="选择优惠劵" :model-value="show" width="1000" :before-close="handleClose" :close-on-click-modal="false"
    :close-on-press-escape="false">
    <SeachTable @handleSelectionChange="handleSelectionChange" rowKey="id" class="mySeachTable" :tableSelection="true"
      :tableType="1" ref="seachTable" :forms="tableForms" :reserveSelection="true" :tableLoading="tableLoading"
      :tableConfig="tableConfig" :tableData="tableData" :totalPage="total" @handlerSearch="handlerSearch">
      <template #promotionalContent="{ row }">
        <div class="flex align-items-center">
          <span>{{ row.promotionalContent }}</span>
          <el-tooltip content="Top Left prompts info" placement="top-start">
            <img :src="warningCircle" class="warningCircleIcon" />
          </el-tooltip>
        </div>
      </template>
      <template #couponNumHeader="{ row }">
        <div class="flex align-items-center">
          <span>赠券数</span>
          <el-tooltip content="赠券数:单个发卷对象发放数量" placement="top-start">
            <img :src="warningCircle" class="warningCircleIcon" />
          </el-tooltip>
        </div>
      </template>
      <template #couponNum="{ row }">
        <el-input style="width:100px" v-model="row.couponNum" @input="()=>{row.couponNum=limitInt(row.couponNum)}" placeholder="请输入"></el-input>
      </template>
    </SeachTable>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="confirm">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { useImportImg } from '@/hooks/index.js'
import { useIssueAction, useCouponAction } from '../Hooks/issueAction.js'
import { limitInt } from '@/utils/common.js'
const warningCircle = useImportImg('warning-circle')
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})
const { releaseContent } = useIssueAction()
const { tableForms, tableConfig } = useCouponAction()
const seachTable = ref(null)
const tableLoading = ref(false)
const tableData = ref([{
  id: 1,
  couponName: '商品名称',
  couponNum: 10,
  surplusQuantity: 100,
  promotionalContent: '满5.01减5',
  remarksName: '备注名称',
  serviceTime: '领取后2天内可用',
  limitingFrequency: false,
  dailyLimit: null,
  timeLimitCollar: null
}])
const total = ref(0)
const handlerSearch = async (data) => {
  console.log('data', data)
  try {
    tableLoading.value = true
    // const res = await rangeActivityList(data)
    const res = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          data: Array(20).fill().map((item, index) => {
            return {
              id: index,
              couponName: '商品名称' + index,
              couponNum: 10,
              surplusQuantity: 100,
              promotionalContent: '满5.01减5',
              remarksName: '备注名称',
              serviceTime: '领取后2天内可用',
              limitingFrequency: false,
              dailyLimit: null,
              timeLimitCollar: null
            }
          }),
          total: 20
        })
      }, 1000)
    })
    console.log('res', res)
    tableData.value = res.data
    total.value = res.total
  } finally {
    tableLoading.value = false
  }
}
const selectionList = ref([])
watch(()=>props.show,(newVal)=>{
  if(newVal){
    nextTick(()=>{
      releaseContent.value.forEach(item=>{
        seachTable.value.table.toggleRowSelection(item,true)
      })
    })
  }
})
const handleSelectionChange = (val) => {
  selectionList.value = val
}
const emit = defineEmits(['close'])
const handleClose = () => {
  emit('close', false)
  seachTable.value.table.clearSelection()
}
const confirm = () => {
  const length = selectionList.value.length
  if (length > 3) {
    ElMessage.error('最多支持选择3种优惠劵,请重新选择')
    return
  }
  releaseContent.value = selectionList.value
  handleClose()
}

</script>

<style lang="less" scoped>
.mySeachTable {
  height: 458px !important;

  :deep(.search-table) {

    .btn-area,
    .line-block {
      display: none;
    }

    .table {
      height: calc(100% - 50px) !important;
    }

    .jg {
      display: none;
    }
  }
}
</style>